<template>
  <div class="content">
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>忙时/闲时配置</el-breadcrumb-item>
        <el-breadcrumb-item>忙时/闲时配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">
        <span>忙时/闲时配置</span>
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="addation"
          >+新增类型</el-button
        >
      </div>
      <ul class="orderList">
        <li class="entirety" v-for="(item, index) in list" :key="index">
          <div class="left">
            <!-- 适用日期： -->
            <div>
              <span>适用日期：</span>
              <el-date-picker
                v-model="item.startDate"
                type="date"
                @change="changeStartDate"
                placeholder="开始日期时间"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <span class="line">~</span>
              <el-date-picker
                v-model="item.endDate"
                type="date"
                @change="changeendDate"
                placeholder="结束日期时间"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <!-- 适用时段： -->
            <div class="Applicable">
              <p>适用时段：</p>
              <div>
                <div
                  class="showtime"
                  v-for="(item1, index1) in item.applyTimes"
                  :key="index1"
                >
                  <el-time-picker
                    v-model="item1.startTime"
                    placeholder="任意时间点"
                    @change="changestartTime"
                    value-format="HH:mm:ss"
                  >
                  </el-time-picker>
                  <span class="line2">~</span>
                  <el-time-picker
                    v-model="item1.endTime"
                    placeholder="任意时间点"
                    @change="changeendTime"
                    value-format="HH:mm:ss"
                  >
                  </el-time-picker>
                  <span>
                    <el-button
                      v-show="index1 === 0"
                      style="background-color:#fd804c;color: #fff;"
                      @click="addtimetion(item)"
                      >+</el-button
                    >
                    <el-button
                      v-show="index1 !== 0"
                      style="background-color:#fd804c;color: #fff;"
                      @click="deltimetion(item, index1)"
                      >—</el-button
                    >
                  </span>
                </div>
              </div>
            </div>
            <!-- 选则类型*： -->
            <div class="Choose">
              <span>选则类型：</span>
              <el-radio v-model="item.adjustType" :label="1">加价</el-radio>
              <el-radio v-model="item.adjustType" :label="2">减价</el-radio>
            </div>
            <!-- 设置金额*： -->
            <div class="amount">
              <span style="margin-right: 2px;">设置金额：</span>
              <el-form :data="list">
                <el-form-item label="" prop="adjustAmount">
                  <el-input-number
                    class="good"
                    :min="0"
                    :max="999.99"
                    :controls="false"
                    :precision="2"
                    v-model="item.adjustAmount"
                    placeholder="请输入金额"
                  ></el-input-number>
                </el-form-item>
              </el-form>
              <span style="padding-top:9px;">元</span>
            </div>
            <!-- 适用用范围* -->
            <div class="application">
              <span>适用范围:</span>
              <div>
                <div
                  class="time"
                  v-for="(item2, index2) in item.applyScopes"
                  :key="index2"
                >
                  <el-select
                    v-model="item2.cityCode"
                    placeholder="请选择"
                    value-key="cityName"
                    @change="findMarketOptions($event)"
                  >
                    <el-option
                      v-for="item in cityOptions"
                      :key="item.cityCode"
                      :label="item.cityName"
                      :value="item.cityCode"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="item2.businessAreaName"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选择"
                    @change="changeSelect($event, item2)"
                  >
                    <!-- <el-option key="selectAll" label="全部" value="selectAll" @click="godds"></el-option> -->
                    <el-option
                      v-for="item in marketOptions"
                      :key="item.businessAreaCode"
                      :label="item.businessAreaName"
                      :value="item.businessAreaCode"
                    >
                    </el-option>
                  </el-select>
                  <span>
                    <el-button
                      v-show="index2 === 0"
                      style="background-color:#fd804c;color: #fff;"
                      @click="addapplication(item)"
                      >+</el-button
                    >
                    <el-button
                      v-show="index2 !== 0"
                      style="background-color:#fd804c;color: #fff;"
                      @click="delapplication(item, index2)"
                      >—</el-button
                    >
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="rights">
              <el-button
                style="background-color:#fd804c;color: #fff;"
                disable="item.useStatus===1"
                v-show="item.useStatus === 0"
                @click="open(item)"
                >启动</el-button
              >
              <el-button
                type="info"
                v-if="item.useStatus === 1"
                @click="down(item)"
                >停用</el-button
              >
              <el-button type="danger" @click="deltoption(item)"
                >删除</el-button
              >
              <el-button type="success" @click="preserve(item)">保存</el-button>
            </div>
          </div>
        </li>
        <!-- 暂无数据 -->
        <li style="list-style:none;">
          <div class="nomessage" v-if="list.length == 0">暂无数据</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      cityOptions: [], //城市枚举
      marketOptions: [], //商圈枚举
      value1: [],
      // 适用用范围
      list: [
        {
          applyScopes: [
            {
              businessAreaCode: "",
              cityCode: ""
            }
          ],
          applyTimes: [
            {
              startTime: "",
              endTime: ""
            }
          ],
          adjustAmount: "",
          adjustCode: "",
          adjustType: "",
          endDate: "",
          startDate: "",
          useStatus: ""
        }
      ],
      list1: [],
      list2: [
        {
          businessAreaCode: "",
          cityCode: ""
        }
      ],
      endTime: "",
      startTime: "",
      businessAreaCode: "",
      cityCode: "",
      applyTimes: "",
      applyScopes: "",
      //全部开通城市
      city: "",
      //全部开通商圈
      market: "",
      value: "",
      isNum: "",
      adjustType: "", //选则类型
      adjustCode: "", //调整编号
      adjustAmount: "", //
      startDate: "",
      endDate: "",
      selectValue: [],
      selectAll: false, // 用于标识是否全选--默认不全选
      realSelect: [],
      useStatus: "" //使用状态：0-停用、1-启用
    };
  },
  mounted() {
    this.sava();
    this.cityaiton();
  },
  methods: {
    changeSelect(value, item2) {
      //console.log(value.toString());
      //console.log(item2);
      item2.businessAreaCode = value.toString();
    },
    changeStartDate(data) {
      //console.log(data);
      this.startDate = data;
    },
    changeendDate(data) {
      this.endDate = data;
    },
    changestartTime(data) {
      this.startTime = data;
    },
    changeendTime(data) {
      this.endTime = data;
    },
    //忙时和闲时配置列表
    sava() {
      this.$http({
        url: "/hsssystemadmin/busyAndIdle/findConfigList",
        method: "get"
      }).then(res => {
        this.list = res.data;
        for (let i = 0; i < res.data.length; i++) {
          let a = res.data;
          this.list1 = a[i].applyTimes;
          this.list2 = a[i].applyScopes;
          this.adjustCode = a[i].adjustCode;
          this.adjustType = a[i].adjustType;
          this.adjustAmount = a[i].adjustAmount;
          this.startDate = a[i].startDate;
          this.endDate = a[i].endDate;
          this.useStatus = a[i].useStatus;
        }
        //console.log(res.data, "忙时和闲时配置列表");
      });
    },
    //添加/修改配置项
    preserve(data) {
      if (data.adjustCode !== "") {
        if (
          Number(data.startDate.split("-").join("")) >
            Number(data.endDate.split("-").join("")) !=
          true
        ) {
          this.$http({
            url: "/hsssystemadmin/busyAndIdle/updateConfig",
            method: "POST",
            data: {
              applyScopes: data.applyScopes,
              applyTimes: data.applyTimes,
              adjustAmount: data.adjustAmount,
              adjustCode: data.adjustCode,
              adjustType: data.adjustType,
              endDate: data.endDate,
              startDate: data.startDate,
              useStatus: data.useStatus
            }
          }).then(res => {
            //console.log(res.data, "修改配置项");
            if (res.data != "OK") {
              this.$message({
                message: res.data,
                type: "error"
              });
            } else {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.sava();
            }
          });
        } else {
          this.$message({
            message: "开始时间不能晚于结束时间",
            type: "error"
          });
        }
      } else {
        if (
          Number(data.startDate.split("-").join("")) >
            Number(data.endDate.split("-").join("")) !=
          true
        ) {
          this.$http({
            url: "/hsssystemadmin/busyAndIdle/insertConfig",
            method: "POST",
            data: {
              applyScopes: data.applyScopes,
              applyTimes: data.applyTimes,
              adjustAmount: data.adjustAmount,
              adjustCode: data.adjustCode,
              adjustType: data.adjustType,
              endDate: data.endDate,
              startDate: data.startDate,
              useStatus: data.useStatus
            }
          }).then(res => {
            //console.log(res, "添加配置项");
            if (res.data === "OK") {
              this.$message({
                message: "修改成功",
                type: "success"
              });
            } else {
              this.$message({
                message: res.data,
                type: "error"
              });
            }
            this.sava();
          });
        } else {
          this.$message({
            message: "开始时间不能晚于结束时间",
            type: "error"
          });
        }
      }
    },
    //删除配置
    deltoption(d) {
      const data = {
        adjustCode: d.adjustCode
      };
      this.$http({
        url: "/hsssystemadmin/busyAndIdle/deleteConfig",
        method: "get",
        params: data
      }).then(res => {
        this.sava();
        //console.log(res, "删除配置");
      });
    },
    //启用和停用
    open(item) {
      this.$http({
        url: "/hsssystemadmin/busyAndIdle/updateConfigState",
        method: "POST",
        data: {
          adjustCode: item.adjustCode,
          useStatus: 1
        }
      }).then(res => {
        //console.log(res, "启用");
        this.sava();
      });
    },
    down(item) {
      this.$http({
        url: "/hsssystemadmin/busyAndIdle/updateConfigState",
        method: "POST",
        data: {
          adjustCode: item.adjustCode,
          useStatus: 0
        }
      }).then(res => {
        //console.log(res, "停用");
        this.sava();
      });
    },
    //城市与商圈下拉数据
    cityaiton() {
      this.$http({
        url: "/staffadmin/homeService/staffManager/fetchCityAndBusiness"
      }).then(res => {
        // //console.log(res, '城市与商圈下拉数据')
        this.cityOptions = res;
        this.marketOptions = res.businessCityInfo;
      });
    },
    findMarketOptions(e) {
      const findObj = this.cityOptions.find(item => {
        this.isNum = e;
        if (item.cityCode == this.isNum) {
          return item.cityCode == e; //筛选出匹配数据
        }
      });
      this.marketOptions = findObj.businessCityInfo;
    },
    //适用时段
    addtimetion(item) {
      //console.log(item);
      item.applyTimes.push({
        endTime: "",
        startTime: ""
      });
    },
    deltimetion(item, index1) {
      item.applyTimes.splice(index1, 1);
    },
    //适用用范围
    addapplication(item) {
      item.applyScopes.push({
        businessAreaCode: "",
        cityCode: ""
      });
    },
    delapplication(item, index2) {
      item.applyScopes.splice(index2, 1);
    },
    //添加配置项
    addation() {
      this.list.unshift({
        applyScopes: [
          {
            businessAreaCode: "",
            cityCode: ""
          }
        ],
        applyTimes: [
          {
            startTime: "",
            endTime: ""
          }
        ],
        adjustAmount: "",
        adjustCode: "",
        adjustType: "",
        endDate: "",
        startDate: ""
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.hander {
  width: 100%;
  font-size: 20px;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .el-button {
    width: 140px;
    height: 40px;
    margin-right: 65px;
  }
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.orderList {
  background-color: #ebeef1;
  padding-top: 1px;
  padding-bottom: 1px;
  display: block;
  font-size: 16px;
  border-radius: 20px;
}
.entirety {
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  padding-left: 10px;
  .fist {
    margin-top: 10px;
  }
  .left {
    height: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    flex: 3;
    border-radius: 1px;
    border-right: 7px solid #f2f2f6;
    .line {
      margin-left: -22px;
    }
    .line2 {
      margin-left: -17px;
      margin-right: 5px;
    }
  }
}
.right {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .rights {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .el-button {
      width: 140px;
      height: 40px;
      margin-top: 20px;
      z-index: 1;
    }
  }
}
.pagination {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
/deep/ .el-input__inner {
  width: 90%;
}
/deep/ .el-input__suffix {
  right: 27px;
}
.el-button {
  width: 70px;
  // margin-top: 10px;
}
.money {
  width: 160px;
}
.apply {
  padding-left: 85px;
}
.Choose {
  margin-top: 10px;
}
.amount {
  margin-top: 10px;
  display: flex;
  height: 40px;
}
.el-button + .el-button {
  margin-left: 0;
}
/deep/ .el-date-editor--timerange {
  width: 418px;
  margin-right: 10px;
}
.Applicable {
  display: flex;
  margin-top: 10px;
  // flex-direction: column;
  .showtime {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-left: 4px;
    margin-bottom: 10px;
    .el-button--primary {
      margin-top: 0;
    }
    .line1 {
      margin-right: 5px;
      margin-left: -18px;
    }
  }
}
.application {
  display: flex;
  margin-top: 10px;
  // flex-direction: column;
  .time {
    padding-left: 15px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
.el-form-item {
  margin-bottom: 0;
  /deep/ .el-input-number {
    width: 125px;
  }
  /deep/ .el-input {
    width: 130px;
  }
}
.nomessage {
  text-align: center;
  padding: 3px;
}
</style>
